<template>
  <div id="app">
    <div class="header">
      <van-search
        class="search"
        v-model="value"
        show-action
        :label="city"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>

    <div class="nav">
      <van-grid :column-num="5">
        <van-grid-item icon="coupon-o" text="门票" />
        <van-grid-item icon="shop-o" text="酒店" />
        <van-grid-item icon="wap-home-o" text="景点" />
        <van-grid-item icon="photo-o" text="周边" />
        <van-grid-item icon="browsing-history-o" text="更多" />
      </van-grid>
    </div>

    <div class="list">
      <van-grid clickable :column-num="2" v-for="value in 6" :key="value" >
        <van-grid-item @click="gotolink">
          <b>[我要上榜单]</b>这个夏天，来避暑山庄游玩吧！          
          <van-tag round class="x1" type="warning">游记</van-tag>
          <van-tag round class="x2" type="warning">实用</van-tag>
          <van-tag round class="x3" type="warning">精华</van-tag>
          <p class="price">￥999</p>
        </van-grid-item>
        <van-grid-item @click="gotolink">
          <img v-for="img in imageList" v-lazy="img" :key="img" />
          <van-icon name="more-o" class="icon1" badge="999+" />
        </van-grid-item>
      </van-grid>
    </div>
    <tabbar />
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Vue from "vue";
import { Search } from "vant";
import { Toast } from "vant";
import { Grid, GridItem } from "vant";
import { Lazyload } from "vant";
import { Icon } from "vant";
import { Col, Row } from "vant";
import { Card } from "vant";
import { Button } from 'vant';
import { Tag } from 'vant';
import tabbar from "@/components/Tabbar.vue";
import frist from '@/views/frist'


Vue.use(Tag);
Vue.use(Button);
Vue.use(Card);
Vue.use(Grid);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(GridItem);
Vue.use(Search);
Vue.use(Toast);
Vue.use(Lazyload, {
  lazyComponent: true
});
export default {
  data() {
    
    return {
      onSearch:'',
      value:'',
      imageList: [
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591161469338&di=c06ea7e37c0f99772283cdf8c33319aa&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Flvpics%2Fs%3D800%2Fsign%3Dbfaf0605b9014a90853e4bbd99763971%2F8b13632762d0f70330372c6b08fa513d2797c584.jpg"
      ]
    };
  },
   components: {
    tabbar,frist
  },
  computed: {
    ...mapState([
      'city'
    ])
  },
  mounted() {
    let id = this.$route.params.id
    console.log(id);
    
  },
  methods: {
    gotolink() {
      this.$router.replace('/details')
    }
  },
};
</script>
  
<style scoped>
.price{
  position: relative;
  top: -10%;
  color: red;
}
.x1{
  position: relative;
  left: 40px;
  top: 20px;
}
.x2{
  position: relative;
  left: 0px;
  top: 3px;
}
.x3{
  position: relative;
  left: -40px;
  top: -15px;
}
.list img {
  width: 90%;
  height:70%;
}
.icon1{
  position: relative;
  left: 30%;
  top: 10%;
}
.header {
  width: 100%;
  height: 100px;
  background: #ec6941;
}
.search {
  width: 90%;
  border-radius: 28px;
  position: relative;
  left: 5%;
  top: 25%;
}
.nav {
  height: 85px;
}
</style>